<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .not {
        width: 50%;
        height: 100%;
        display: inline-block;
        background: url("evening.png") center no-repeat;
      }
      button {
        margin-top: 90px;
        height: 10px;
      }
      .box {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <button></button>
      <div class="not"></div>
    </div>
    <input type="text" value="搜索" />
    <script>
      var button = document.querySelector("button");
      var div = document.querySelector(".not");
      button.onclick = function () {
        if (div.style.display === "none") div.style.display = "inline-block";
        else div.style.display = "none";
      };
      var search = document.querySelector("input");
      search.onfocus = function () {
        console.log(search.value);
        if (search.value === "搜索") {
          search.value = "";
        }
      };
      search.onblur = function () {
        if (!search.value) search.value = "搜索";
      };
    </script>
  </body>
</html>
